
import React, { Component } from 'react';
import { StyleSheet, TextInput, View, Text, Image, ScrollView, Dimensions, PropTypes } from 'react-native';
import QRNCode from 'react-native-qrcode';
import ColorBorderView from '../commonComponent/colorBorderView';

const _windows = Dimensions.get('window');
const _width = _windows.width;


class ReactNativeQRcode extends Component {
    static propTypes = {

    }

    constructor(props, context) {
        super(props, context);
        this.state = {
            text: 'http://facebook.github.io/react-native/',
            torchMode: 'on',
            cameraType: 'back',
        }
    };
// scale: 3
    render() {
        return (
            <ScrollView style={styles.containerScrollView} >
                <View style={styles.container}>
                    <QRNCode
                        value={this.state.text}
                        size={240}
                    />
                    <Image position='absolute' style={styles.centerImg} source={{uri:'more_icon_qq'}} />
                    <Text style={styles.number} >623165449661489</Text>
                    <Text style={styles.message} >扫描二维码查看护照信息</Text>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    containerScrollView: {
        flex:1,
        backgroundColor: '#F5FCFF'
    },
    container: {
        flex:1,
        margin:20,
        alignItems: 'center',
        justifyContent: 'flex-end'
    },
    qrContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        margin: 10,
        borderRadius: 5,
        padding: 5,
    },
    number: {
        fontSize: 14,
        textAlign: 'center',
        color: '#9b9b9b',
        marginTop:20,
    },
    message: {
        fontSize: 16,
        textAlign: 'center',
        color: '#4A4A4A',
        marginTop:80,
    },
    centerImg: {
        backgroundColor:'#FFFFFF',
        borderRadius:4,
        left:(_width/2.0-40),
        top:100,
        width:40,
        height:40,
    }
});

export default ReactNativeQRcode;